import { Link, Routes, Route, Navigate } from "react-router-dom";

const Home = () => {
  return <div>home页面</div>;
};

const About = () => {
  return <div>about页面</div>;
};

const Login = () => {
  return <div>登录页面</div>;
};

// 路由鉴权的组件
const Auth = ({ children }) => {
  const token = localStorage.getItem("token");
  if (!token) {
    return <Navigate to="/login"></Navigate>;
  } else {
    return children;
  }
};

const App = () => {
  return (
    <>
      <h3>router-v6-auth</h3>
      <ul>
        <li>
          <Link to="/home">home</Link>
        </li>
        <li>
          <Link to="/about">about</Link>
        </li>
      </ul>

      <hr />

      <Routes>
        <Route path="/" element={<Navigate to="/home"></Navigate>}></Route>
        <Route path="/home" element={<Home />}></Route>
        <Route
          path="/about"
          element={
            <Auth>
              <About />
            </Auth>
          }
        ></Route>
        <Route path="/login" element={<Login />}></Route>
      </Routes>
    </>
  );
};

export default App;
